<template>
    <div>
        <div class="datatables" >
            <el-table
                    :data="logs"
                    height="500"
                    border
                    style="width: 100%">
                <el-table-column
                        label="首页显示"
                        width="210">
                    <el-table-column
                            prop="id"
                            label="编号"
                            width="210">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            label="用户姓名"
                            width="210">
                    </el-table-column>
                    <el-table-column
                            prop="key"
                            label="令牌"
                            width="210">
                    </el-table-column>
                    <el-table-column
                            prop="date"
                            label="访问时间"
                            width="210">
                    </el-table-column>
                    <el-table-column
                            prop="state"
                            label="状态"
                            width="210"
                    >
                    </el-table-column>
                </el-table-column>
            </el-table>

            <div class="block">
                <span class="demonstration"></span>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="1"
                        :page-sizes="[10, 20, 30]"
                        :page-size="10"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </div>

        </div>
    </div>

</template>

<script>
    import Cookies from 'js-cookie'
    import axios from 'axios';
    export default {
        data() {
            return {
                logs: new Array(),
                page : 1,
                rows: 10,
                total:0,
            }
        },
        mounted() {
            this.firstLoginnotify();
            this.test();
        },
        methods: {
            firstLoginnotify() {
                const USERNAME = Cookies.get('username') || 'Sakuya'
                if (this.$store.state.app.firstLogin === 'yep') {
                    this.$notify.info({
                        title: `Welcome, ${USERNAME}`,
                        message: 'First login system, You can view eden system documentation',
                        duration: 6000,
                        offset: 60
                    });
                    this.$store.dispatch('setFirstLogin')
                }
            },
            test () {

                let url  = "https://www.xuedierhuo.cn/visit?rows="+ this.rows +"&page=" + this.page;
                //重置data数据
                Object.assign(this.$data, this.$options.data())
                axios(url, {
                    method:'get',
                    headers:{
                        'token': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VybmFtZSI6ImphY2sifQ.upmR7IOj-TN1k5gY7eR_XMl7Wi8vfGsRKVPcSUYIoR4',
                    },
                    url:url,
                }).then((response)=>{

                    console.log(response)
                    var flag =  response.data.rows;
                    this.total = response.data.total;


                    for (let i = 0; i < flag.length; i++) {
                        let log = flag[i];
                        let data = {
                            date:log.date,
                            id: log.id,
                            key:log.key,
                            state:log.state==='0' ?"进入寝室":"离开寝室",
                            username:log.username,

                        };
                        this.logs.push(data)
                    }
                }).catch(function(error) {
                    alert(error);
                });
            },
            handleSizeChange(val) {
                this.rows = val;
                this.test();
            },
            handleCurrentChange(val) {
                this.page = val;
                this.test();

            }
        },
    }

</script>

<style lang="stylus" scoped>
    .datatables
        margin-bottom: 20px
        margin-right: 30px
        background white
</style>